/* Gap levels styles: owner for S/R and average/max gap level settings. */

html body .sr-settings,
html body .gap-average-settings {
  box-sizing: border-box !important;
}

html body .sr-settings-panel,
html body .gap-average-panel {
  box-sizing: border-box !important;
  z-index: 2147483600 !important;
}

html body .sr-settings summary,
html body .gap-average-settings summary {
  max-width: 100% !important;
}

html body .sr-settings .sr-settings-visible,
html body .sr-settings .sr-settings-check,
html body .sr-settings .sr-settings-field,
html body .gap-average-panel label,
html body .gap-average-panel .gap-average-visible {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

html body .sr-settings .sr-settings-field input,
html body .gap-average-panel input[type="number"],
html body .gap-average-panel select {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body .sr-settings .sr-settings-reset {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
}

@media (max-width: 680px) {
  html body .sr-settings,
  html body .gap-average-settings {
    position: static !important;
  }

  html body .sr-settings-panel,
  html body .gap-average-panel {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 12px !important;
    width: auto !important;
    max-height: calc(100vh - 24px) !important;
    overflow: auto !important;
  }

  html body .sr-settings-panel {
    grid-template-columns: 1fr !important;
    padding-bottom: 12px !important;
  }

  html body .sr-settings .sr-settings-reset {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
  }
}

@media (max-height: 500px) and (max-width: 960px) {
  html body .sr-settings,
  html body .gap-average-settings {
    position: static !important;
  }

  html body .sr-settings-panel,
  html body .gap-average-panel {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 12px !important;
    width: auto !important;
    max-height: calc(100vh - 24px) !important;
    overflow: auto !important;
  }

  html body .sr-settings-panel {
    grid-template-columns: 1fr !important;
    padding-bottom: 12px !important;
  }

  html body .sr-settings .sr-settings-reset {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
  }
}